<div nz-row>
  <div nz-col [nzOrder]="formOrder" [nzXXl]="12" [nzXl]="12" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
    <form [nzLayout]="'horizontal'" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="pureFlag">化学品成分</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="化学品成分">
          <nz-radio-group formControlName="pureFlag" (ngModelChange)="buttonChange($event)">
            <label nz-radio [nzValue]="false">混合物</label>
            <label nz-radio [nzValue]="true">纯品</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <ng-container formArrayName="elementDetailDtos">
        <ng-container *ngFor="let item of items.controls; let i = index">
          <ng-container [formGroupName]="i">
            <nz-form-item>
              <nz-form-label nzSpan="12" nzFor="harmfulElement">有害物成分{{i + 1}}</nz-form-label>
              <nz-form-control nzSpan="12" nzErrorTip="有害物成分1">
                <input nz-input formControlName="harmfulElement" id="harmfulElementOne"
                       placeholder="有害物成分{{i+1}}"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzSpan="12" nzFor="harmfulMmol">浓度</nz-form-label>
              <nz-form-control nzSpan="12" nzErrorTip="浓度">
                <input nz-input formControlName="harmfulMmol" id="harmfulMmol1" placeholder="浓度"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzSpan="12" nzFor="cas">CAS号</nz-form-label>
              <nz-form-control nzSpan="12" nzErrorTip="cas">
                <input nz-input formControlName="cas" id="cas" placeholder="cas"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzSpan="12" nzFor="cas">危化品序号</nz-form-label>
              <nz-form-control nzSpan="12" nzErrorTip="危化品序号">
                <input nz-input formControlName="dangerNo" id="dangerNo" placeholder="危化品序号"/>
              </nz-form-control>
            </nz-form-item>
          </ng-container>
          <nz-divider></nz-divider>
        </ng-container>
      </ng-container>
      <nz-form-item *ngIf="AdminService.isAdmin" nz-row class="register-area">
        <nz-form-control [nzSpan]="12" [nzOffset]="12">
          <button nz-button nzType="primary">确定</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
<ng-template #combineTpl let-control>
  <ng-container *ngIf="control.hasError('message')">{{control.errors['message']}}</ng-container>
  <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
</ng-template>

